<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <style>
    /* .header {
      height: 200px;
      background: red;
      margin: 20px;
    }
    .content {
      height: 200px;
      background: blue;
      margin: 20px;
    } */
    .left {
      height: 50px;
      width: 100px;
      background: red;
      display: inline-block;
    }
    .right {
      height: 200px;
      width: 300px;
      background: blue;
      float: left;
    }
    .box {
      /* height: 100px;
      width: 100px; */
      /* background: red; */
      margin: -50px 0 0 -50px;
      position: absolute;
      top: 50%;
      left: 50%;
      /* transform: translate(-50%, -50%); */
      border-right: 100px solid transparent;
      border-top: 100px solid transparent;
      border-left: 100px solid transparent;
      border-bottom: 100px solid pink;
    }
    * {
      padding: 0;
      margin: 0;
    }
    html {
      height: 100%;
      font-size: 12px;
    }
    body {
      position: relative;
      height: 100%;
      /* display: flex;
      justify-content: center;
      align-items: center; */
    }
    .text {
      font-size: 16px;
    }
    p {
      font-size: 2rem;
    }
    .leaf {
      height: 200px;
      width: 200px;
      margin: 100px auto;
      background: rgb(11, 221, 11);
      border-radius: 50% 0 50% 0;
      position: relative;
    }
    .leaf::after {
      content: "";
      width: 1px;
      height: 150px;
      background: #fff;
      position: absolute;
      top: 0;
      left: 100%;
      transform: rotate(45deg);
      transform-origin: right top;
    }
  </style>
  <body>
    <!-- <div style="overflow: hidden">
      <div class="header"></div>
    </div>
    <div class="content"></div> -->
    <!-- <div class="left"></div>
    <div style="display: inline-block; border: 1px solid red">
      <div class="right"></div>
    </div> -->

    <div class="box"></div>

    <!-- <div class=""></div> -->
    <div class="text">
      <p>我是积云毕业的</p>
      <span>对比</span>
    </div>
    <div class="leaf"></div>
  </body>
</html>
